<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .clock-box {
            /* 父元素宽度依赖子元素撑开 */
            width: fit-content;
            margin: 50px auto;
            /* border: 1px dashed #333; */
            text-align: center;
            padding: 10px 20px;
        }

        .clock-box .clock-time {
            height: 100px;
            font-size: 75px;
            line-height: 100px;
            font-family: "clockicons";
        }

        .clock-box .clock-time span {
            font-size: 45px;
        }

        .button-group {
            margin-top: 5px;
        }

        /* 定义自定义字体 */
        @font-face {
            font-family: "clockicons";
            src: url(../font/clockicons.woff2);
        }
    </style>
</head>

<body>
    <div class="clock-box">
        <div class="clock-time">00:00<span>.00</span></div>
        <div class="button-group">
            <button class="start">开始</button>
            <button class="pause">暂停</button>
            <button class="reset">重置</button>
        </div>
    </div>
</body>
<script>
    var clockTime = document.getElementsByClassName("clock-time")[0];
    var start = document.getElementsByClassName("start")[0];
    var pause = document.getElementsByClassName("pause")[0];
    var reset = document.getElementsByClassName("reset")[0];

    var timer = null;
    var ms = 0;
    var isStart = false; // 记录计时器(秒表)是否启动
    
    start.onclick = function () {
        // 防抖处理 => 防止连续点击启动计时器问题 (解决方式:记录启动状态,如果已经启动就不在启动)
        if(isStart == true) return false;  // 如果计时器已经启动 后续代码不执行,如果没有启动, 继续执行后续的代码
        isStart = true;  // 计时器启动 => 记录状态

        clearInterval(timer);
        timer = setInterval(function () {
            ms += 10;
            // console.log(ms);

            var milli = ms % 1000 / 10;
            var sec = Math.floor(ms / 1000) % 60; // 不满一分钟的秒数
            var min = Math.floor(ms / (1000 * 60)) % 60; // 不满一小时的分钟数
            clockTime.innerHTML= `${beauty(min)}:${beauty(sec)}<span>.${beauty(milli)}</span>`
        }, 1000);


    }

    pause.onclick = function(){
        clearInterval(timer);
        isStart = false;
    }
    
    reset.onclick = function(){
        clearInterval(timer);
        isStart = false;

        // 重新计时
        ms = 0
        clockTime.innerHTML= `00:00<span>.00</span>`
    }


    function beauty(num){
        return num < 10 ? "0" + num : num;
    }



</script>

</html>